<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>权限列表</title>
<link rel="stylesheet" href="<%=basePath %>/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/plugins/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath %>/bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css">
    <link rel="stylesheet" href="<%=basePath%>/bootstrap/css/bootstrap-multiselect.css">
    <link href="<%=basePath %>/plugins/bootstrapValidator/css/bootstrapValidator.min.css"  rel="stylesheet">
    
    <script src="<%=basePath %>/js/jquery.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrapQ.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/bootstrap-table.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
	
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/language/zh_CN.js"></script>
	<script src="<%=basePath%>/bootstrap/js/bootstrap-multiselect.js"></script>
	<script src="<%=basePath %>/js/util.js"></script>
	
	<link rel="stylesheet" href="<%=basePath%>/css/toastr.min.css">
	<script src="<%=basePath%>/js/toastr.min.js"></script>
	<script src="<%=basePath%>/js/toastrinit.js"></script>
<style> 
.table-hover>tbody>tr:hover{background-color:#C6E2FF}
</style>

<script type="text/javascript">
$(document).ready(function(){
	//控件初始化
    //角色状态选择框初始化
    $.ajax({
        url:"<%=basePath%>/dict/getMultiselect.do",
        type:"POST",
        dataType:"json",
        data:{dictionaryCode:"T_PERMISSION_STATUS"},
        success:function(data){
            $("#permission_status").empty();
            $("#permission_status").multiselect({
                enableFiltering: false,
                 maxHeight: 300
            });
     	   $("#permission_status").multiselect('dataprovider',eval(data.jsonData));//数据初始化。如果有数据默认值，则需要参考最上面的代码
           $("#permission_status").multiselect('select',data.defaultVal); //默认选择值
           $("#permission_status").multiselect('refresh'); //配合默认选择值进行刷新

        }    
	 });
   //控件初始化完毕
	
	//在表中显示数据
    var url = '<%=basePath %>/permission/listPermissionPage.do';
    $("#table").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:url,//请求url
            dataType:'json',
            queryParams:queryParams,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            pagination:true,//是否分页
        	pageList: [10, 25, 50, 100],
			pageSize:10,
			pageNumber:1,
			sidePagination:'server',
			
            showRefresh: true,                  //是否显示刷新按钮
            striped:true,//行间隔色
            locale:"${language}" ,
            //showToggle : true, 
            toolbar:"#toolbar",
            //showColumns:true
            clickToSelect:true,
            onClickRow: function (row,$element) {
          	   $element.addClass('info').siblings().removeClass('info').end();
          	}
     });
    //在初始化和查询要传递的参数
    function queryParams(params){	
        return {
        	permissionCode : $("#query_permissionCode").val() ,
        	permissionName : $("#query_permissionName").val() ,
        	limit : params.limit ,
			offset : params.offset
        };
    };
    
   
    //查询按钮的点击事件
    $("#btn_query").click(function(){
        $("#table").bootstrapTable('refresh');
    });

    //添加
    $("#btn_add").click(function(){
    	 $('#myModal').modal('show');
    	 
    	 $('#permission_id').val("");
    	 $('#permissionCode').val("");
    	 $('#permissionName').val("");
    	 $('#permissionUrl').val("");
    	 $('#description').val("");
    	 $('#permission_status').multiselect('disable');
    	
    });
   
    
    
    $("#permission_form").bootstrapValidator();
    //保存权限
    $('#btn_permission_save').click(function(){
  	  var bootstrapValidator = $("#permission_form").data('bootstrapValidator');
	  bootstrapValidator.resetForm(); //每次验证前都重置验证状态
	  bootstrapValidator.validate();
	  if(! bootstrapValidator.isValid()){
	       return false;
	  }
    	$.ajax({
    		type:"POST",
			dataType:"json",
            url:"<%=basePath%>/permission/save.do",
            data:{id: $("#permission_id").val(), 
            	permissionCode: $("#permissionCode").val(),
            	permissionName: $("#permissionName").val(),
            	url: $("#permissionUrl").val(),
            	description: $("#description").val()
            },
            success:function(data){
        		if(data=="error"){
        			toastr.error("<spring:message code='permission.repetition' />");
        		}else{
        			toastr.success("<spring:message code='base.success' />");
           	    	$('#myModal').modal('hide');
           	    	$("#table").bootstrapTable('refresh');
        		}
       		 },error:function(data){
        		toastr.error("<spring:message code='base.error' />");
        	 }    
    	 });
    });

});//document结束

function orderFormatter(value,row,index){
	return index+1;
}


//权限状态显示
function permission_status_formatter(value, row, index) {
	if(row.status=='1'){
		return '<span class="text-success">' + row.statusName + '</span>';
	}
	if(row.status=='0'){
		return '<span class="text-danger">'+ row.statusName +'</span>';
	}
	else{
		return '<span class="text-danger">'+ row.statusName +'</span>';
	}
};




//权限
function operateFormatter(value, row, index) {
	if(row.status=='1'){
        return [
            '<a class="permission_edit ml10" href="javascript:void(0)" title="<spring:message code='base.edit' />">',
                '<span class="glyphicon glyphicon-edit "  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="permission_disable ml10" href="javascript:void(0)" title="<spring:message code='base.disable' />">',
                '<span class="glyphicon glyphicon-remove"  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;',
        	'<a class="delete_true ml10" href="javascript:void(0)" title="<spring:message code='base.delete.true' />">',
            	'<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
            '</a>',
        ].join('');
    }else{
    	return [
    	        '<a class="permission_edit ml10" href="javascript:void(0)" title="<spring:message code='base.edit' />">',
                '<span class="glyphicon glyphicon-edit "  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
            '<a class="permission_able ml10" href="javascript:void(0)" title="<spring:message code='base.able' />">',
                '<span class="glyphicon glyphicon-ok"  style="font-size:15px;"></span>',
            '</a>',
            '&nbsp;&nbsp;&nbsp;&nbsp;',
        	'<a class="delete_true ml10" href="javascript:void(0)" title="<spring:message code='base.delete.true' />">',
            	'<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
            '</a>',
        ].join('');
    }
}



//操作功能
window.operateEvents = {
	//权限操作
	'click a.permission_edit': function (e, value, row, index) {
		$.ajax({
            type: "POST",
             url: "<%=basePath %>/permission/getPermission.do",
             data: {permissionId:row.id},
             success: function(data){	
	             var obj = JSON.parse(data);
            	 $('#myModal').modal('show');
            	 
            	 $('#permission_id').val(obj.id);
            	 $('#permissionCode').val(obj.permissionCode);
            	 $('#permissionName').val(obj.permissionName);
            	 $('#permissionUrl').val(obj.url);
            	 $('#description').val(obj.description);
            	 
            	 $('#permission_status').val(obj.status);
            	 $('#permission_status').multiselect('select',obj.status); //默认选择值
             	 $('#permission_status').multiselect('refresh'); //配合默认选择值进行刷新
             	 $('#permission_status').multiselect('disable');
             }
         });
		

     } , 
     'click a.permission_disable': function (e, value, row, index) {
       	bootstrapQ.confirm({
      			title:"<spring:message code='base.alert.title' />",
      			msg:"<spring:message code='permission.disable.alert'/>"   
      		},function(){
       			$.ajax({
		             type: "POST",
		             dataType:"json",
		             url: "<%=basePath %>/permission/disable.do",
		             data: {permissionId:row.id},
		             success: function(data){	
		            	 if(data=="error"){
		            		 toastr.error("<spring:message code='permission.delete.errormsg'/>");
		            	 }else{
		            	 	toastr.success("<spring:message code='base.success'/>");
		            	 	$("#table").bootstrapTable('refresh');
		            	 }
		             },error:function(data){
		            	 toastr.error("<spring:message code='base.error'/>");
		            	  $("#table").bootstrapTable('refresh');
		             }
		         });
       		});
       }, 
       'click a.permission_able': function (e, value, row, index) {
          	bootstrapQ.confirm({
          		   title:"<spring:message code='base.alert.title' />",
          		   msg:"<spring:message code='permission.able.alert'/>"   
         		},function(){
	          		$.ajax({
	   		            type: "POST",
	   		             url: "<%=basePath %>/permission/able.do",
	   		             data: {permissionId:row.id},
	   		             success: function(data){
	   		            	 toastr.success("<spring:message code='base.success'/>");
	   		                 $("#table").bootstrapTable('refresh');
	   		             } ,error:function(data){
			            	 toastr.error("<spring:message code='base.error'/>");
			            	  $("#table").bootstrapTable('refresh');
			             }
	   		         });
          		});
          },
     	 'click a.delete_true': function (e, value, row, index) {

 			bootstrapQ.confirm({
 				title:"<spring:message code='base.alert.title' />",
    			msg:"<spring:message code='permission.deletetrue.msg' />"   
    			
    		},function(){
    			$.ajax({
    	    		type:"POST",
    				dataType:"json",
    	            url:"<%=basePath%>/permission/delete.do",
    	            data:{
    	            	permissionId:row.id 
    	            },
    	            success:function(data){
    	            	if(data.msg == 'success'){
    	            		toastr.success("<spring:message code='base.success'/>"); 
    	            	    $("#table").bootstrapTable('refresh');
    	           		 }
    	            },error:function(data){
    	            	toastr.error("<spring:message code='base.error'/>"); 
    	            }
    	    	 });
     	});
 	 }

} ;
</script>

</head>
<body >
<div>
    <div style="float:left;width:98%; margin-left:1%">
            <div id="toolbar">
                    <div class="form-inline" >
                    <form id="queryForm">
                        <div class="form-group">
                            <div  style="vertical-align:top ">
                                <input  type="text" id="query_permissionCode"  class="" placeholder="<spring:message code='permission.permissioncode'/>" > 
                                <input  type="text" id="query_permissionName"  class="" placeholder="<spring:message code='permission.permissionname'/>" > 	
                            </div>
                        </div>
                        
                        <button id="btn_query" 	type="button" class="btn btn-primary"><spring:message code='base.search' /></button>
                        <button id="btn_add" 	type="button" class="btn btn-primary"><spring:message code='base.add' /></button>

					</form>
                    </div>
            </div>
            <table   id="table" class="table table-hover" >		  		    
                <thead>
                    <tr class="success"> 
                    	<th data-radio="true">i</th>
                        <th data-field="" data-formatter="orderFormatter"><spring:message code='base.order.number' /></th>
                        <th data-field="permissionCode">  <spring:message code='permission.permissioncode' /></th>
                        <th data-field="permissionName"  > <spring:message code='permission.permissionname' /></th> 
                        <th data-field="url"  ><spring:message code='permission.url' /></th> 
                        <th data-field="description"  ><spring:message code='permission.description' /></th> 
                        <th data-field="status"  data-formatter="permission_status_formatter"><spring:message code='permission.status' /></th> 
                        <th data-field="operation" data-formatter="operateFormatter" data-events="operateEvents"><spring:message code='base.operate' /></th>
                    </tr>
                </thead>             
            </table>
    	</div>  
	</div> 
	<!-- modal -->
	    <div class="modal fade" id="myModal" tabindex="-1" >
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close"  data-dismiss="modal" >	&times; </button>
	            <h4 class="modal-title" id="myModalLabel">
	               	<spring:message code='permission.edit.msg' />
	            </h4>
	         </div>
				<div class="modal-body">
					<form class="form-horizontal" id = "permission_form" >
						<input type="hidden" id="permission_id" name="permission_id" value="">
						<div class="form-group">
							<label for="permissionCode" class="col-sm-3 control-label"><spring:message code='permission.permissioncode' /><font color='red'>*</font>:
							</label>
							<div class="text-left col-sm-6">
								<input id="permissionCode" type="text" name="permissionCode" style="width:100%"  required   class="form-control" />
							</div>
						</div>


						<div class="form-group">
							<label for="permissionName" class="col-sm-3 control-label"><spring:message code='permission.permissionname' /><font color='red'>*</font>:
							</label>
							<div class="text-left col-sm-6">
								<input id="permissionName" type="text" name="permissionName"
									style="width:100%" required  
									class="form-control" />
							</div>
						</div>
						
						
						<div class="form-group">
							<label for="permissionUrl" class="col-sm-3 control-label"><spring:message code='permission.url' /></label>
							<div class="text-left col-sm-6">
								<input id="permissionUrl" type="text" name="permissionUrl"
									style="width:100%" 
									 class="form-control" />
							</div>
						</div>


						<div class="form-group">
							<label for="description" class="col-sm-3 control-label"><spring:message code='permission.description' /><font color='red'>*</font>：</label>
							<div class="text-left col-sm-6">
								<input id="description" type="text" name="description"
									style="width:100%" 
									required   class="form-control" />
							</div>
						</div>
						<div class="form-group">
							<label for="permission_status" class="col-sm-3 control-label"><spring:message code='permission.status' /><font color='red'>*</font>：
							</label>
							<div class="text-left col-sm-6">
								<select id="permission_status" name="permission_status" class="form-control"></select>
							</div>
						</div>

					</form>
					 <div class="form-group">  
		                    <div style="text-align:center">  
		                        <button id= "btn_permission_save" type="button" class="btn btn-primary btn-sm"><spring:message code='base.save' /> </button>  
		                    </div>  
               			 </div>  
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
</body>
</html>